<template>
  <ul class="menu">
    <li
      class="menu_list"
      v-for="(item, index) in list"
      :key="index"
      :class="active && active == index ? 'active' : ''"
    >
      <a class="menu_list_link" :href="item.url">
        <text class="menu_list_link_name">{{ item.name }}</text>
      </a>
    </li>
  </ul>
</template>

<script setup>
defineProps({
  list: {
    type: Array,
    default: [
      {
        name: "个人信息",
        url: "/userCenter",},
      {
        name: "身份认证",
        url: "/userCenter/IdIdent"},
      {
        name: "更换手机",
        url: "/userCenter/UpdatePhone"},
      {
        name: "班级信息",
        url: "/userCenter/ClassInfo"},
      {
        name: "学习记录",
        url: "/userCenter/LearnRecords"},
      {
        name: "购买记录",
        url: "/userCenter/PurchaseRecords"},
      {
        name: "考试记录",
        url: "/userCenter/ExamRecords"},
      {
        name: "我的留言",
        url: "/userCenter/LeaveMessage"},
    {   
        name: '我的证书',
        url: '/userCenter/MyCertificate'
    }   
    ]
  },
  active: {
    type: String,
    default: "",
  },
});
</script>

<style lang="less" scoped>
.menu {
  width: 250px;
  border-radius: 10px;
  background-color: #fff;
  border: 1px solid #eeeeee;
  padding: 24px 0;

  &_list {
    height: 40px;
    line-height: 40px;
    padding-left: 56px;
    position: relative;

    &_link {
      width: 100%;
      display: flex;
      align-items: center;

      &_icon {
        width: 16px;
        height: 16px;
        margin-right: 16px;
      }

      &_name {
        font-size: 16px;
        font-weight: bold;
        color: #333333;
      }
    }

    &.active {
      &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 4px;
        height: 16px;
        background: #2c6eff;
      }

      .menu_list_link_name {
        color: #2c6eff;
      }
    }
  }
}
</style>
